<template>
  <div class="moments-page">
    <!-- 顶部导航栏 -->
    <van-nav-bar title="看一看" left-arrow @click-left="router.back()" />

    <BScrollList
      ref="bScrollRef"
      :requestApi="getMomentsList"
      :requestParams="{ pageSize }"
      class="moments-list"
    >
      <template #default="{ list }">
        <Waterfall
          ref="waterfallRef"
          :list="list"
          :width="180"
          :gutter="8"
          :hasAroundGutter="true"
          imgSelector="img"
          :breakpoints="{
            1200: { rowPerView: 4 },
            800: { rowPerView: 3 },
            500: { rowPerView: 2 },
          }"
          @after-render="onAfterRender"
          class="waterfall-container"
        >
          <template #default="{ item }">
            <div class="moment-card" @click="handleMomentClick(item)">
              <LazyImg url="https://picsum.photos/seed/cover/100/200" @success="onImageLoad" />
              <div class="content">{{ item.content }}</div>
              <div class="info">
                <div class="user">
                  <van-image :src="item.avatar" round width="20" height="20" />
                  <span class="name">{{ item.username }}</span>
                </div>
                <div class="stats">
                  <van-icon name="like-o" />
                  <span>{{ formatLikes(item.likes) }}</span>
                </div>
              </div>
            </div>
          </template>
        </Waterfall>
      </template>
    </BScrollList>
  </div>
</template>

<script setup lang="ts">
import { ref, nextTick } from 'vue'
import { useRouter } from 'vue-router'
import { Waterfall, LazyImg } from 'vue-waterfall-plugin-next'
import 'vue-waterfall-plugin-next/dist/style.css'
import BScrollList from '@/components/common/BScrollList.vue'
import { getMomentsList } from '@/api/moments'
import { formatNumber } from '@/utils/format'

interface MomentItem {
  id: number | string
  content: string
  username: string
  avatar: string
  likes: number
  cover?: string
  images?: string[]
  createTime?: string
}

interface WaterfallItem extends MomentItem {
  img: string
}

const router = useRouter()
const loadedImages = ref(0)
const waterfallRef = ref()
const bScrollRef = ref()
const list = ref<WaterfallItem[]>([])
const pageSize = 10

onMounted(() => {})

// 图片加载完成回调
const onImageLoad = () => {
  loadedImages.value++
  nextTick(() => {
    waterfallRef.value?.renderer()
  })
}

// 点击动态项
const handleMomentClick = (moment: WaterfallItem) => {
  router.push(`/moments/${moment.id}`)
}

// 格式化点赞数
const formatLikes = (likes: number | string | undefined) => {
  if (likes === undefined || likes === null) return '0'
  const num = Number(likes)
  return isNaN(num) ? '0' : formatNumber(num)
}

// 瀑布流渲染完成回调
const onAfterRender = () => {
  console.log('Waterfall rendered')
}
</script>

<style scoped lang="less">
.moments-page {
  min-height: 100vh;
  background: #f8f8f8;

  .moments-list {
    height: calc(100vh - 46px); // 减去导航栏高度
  }

  .waterfall-container {
    padding: 8px;
  }

  .moment-card {
    background: #fff;
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 8px;

    .image-wrapper {
      width: 100%;
      position: relative;
      padding-bottom: 100%;
      overflow: hidden;

      :deep(.van-image) {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }

    .content {
      font-size: 14px;
      color: #333;
      line-height: 1.4;
      margin: 8px;
      display: -webkit-box;
      -webkit-line-clamp: 3;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }

    .info {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin: 8px;

      .user {
        display: flex;
        align-items: center;
        gap: 4px;

        .name {
          font-size: 12px;
          color: #666;
        }
      }

      .stats {
        display: flex;
        align-items: center;
        gap: 4px;
        font-size: 12px;
        color: #666;

        .van-icon {
          font-size: 14px;
        }
      }
    }
  }
}
</style>
